<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="block">
            <el-input
              placeholder="查询"
              v-model="filterText"
              style="width: 200px"
            >
            </el-input>
            <el-tree
              :data="data"
              node-key="id"
              :default-expand-all="true"
              @node-click="handleNodeClick"
              :expand-on-click-node="false"
            >
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <span>{{ node.label }}</span>
                  <span style="float: right">
                    <el-button type="text" size="mini" @click="append(data)">
                      编辑
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click="remove(node, data)"
                    >
                      删除
                    </el-button>
                  </span>
                </div>
              </template>
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="17"
        ><div class="wrap-details">
          <el-card class="box-card">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="text" label="名称" align="center">
              </el-table-column>

              <el-table-column prop="value" label="版本" align="center">
              </el-table-column>

              <el-table-column prop="value" label="版本类别" align="center">
              </el-table-column>

              <el-table-column prop="value" label="文件大小" align="center">
              </el-table-column>

              <el-table-column prop="value" label="上传时间" align="center">
              </el-table-column>

              <el-table-column prop="value" label="备注" align="center">
              </el-table-column>
              <el-table-column label="操作" width="240" align="center">
                <template #default="scope">
                  <el-button size="mini" @click="handleEdit1(scope.row, 2)"
                    >编辑</el-button
                  >
                  <el-button size="mini">下载</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleted1(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    const data = [
      {
        id: 1,
        label: "一级1",
        children: [
          {
            id: 4,
            label: "二级1-1",
          },
        ],
      },
      {
        id: 2,
        label: "一级2",
        children: [
          {
            id: 5,
            label: "二级2-1",
          },
          {
            id: 6,
            label: "二级2-2",
          },
        ],
      },
      {
        id: 3,
        label: "一级3",
        children: [
          {
            id: 7,
            label: "二级3-1",
          },
          {
            id: 8,
            label: "二级3-2",
          },
        ],
      },
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
      filterText: "",
      fileList: [],
      form: {
        version: "",
        name: "",
        category: "",
        desc: "",
      },
      plassets: false,
      under: 1,
      single: "",
      display: "全部",
      tabPosition: "top",
      tableData: [
        {
          date: "3.3.7.0",
          name: "USG Studio",
          date1: "USG Studio",
          address: "10",
          address1: "2021/1/1",
          address2: "张三",
          address3: "xxxxxxx",
        },
      ],
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    newest(index) {
      this.under = index;
      this.single = "新增";
      this.plassets = true;
    },
    displayCheck(flat) {
      this.display = flat;
    },
  },
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.wrap-details {
  margin-left: 30px;
}
</style>